<template>
  <!--视图-->
  <div>

    <el-button type="primary" @click="openAdd">添 加</el-button>

    <el-button type="primary" @click="delOne">删 除</el-button>

    <template>
      <el-table
          :data="orders"
          border
          style="width: 100%"
          highlight-current-row
          @current-change="hand"
          >
        <el-table-column
            fixed
            prop="id"
            label="编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="orderDate"
            label="下单日期"
            width="120">
        </el-table-column>
        <el-table-column
            prop="deliveryDate"
            label="预计交货日期"
            width="120">
        </el-table-column>

        <el-table-column
            prop="remainingDays"
            label="剩余天数"
            width="120">
        </el-table-column>

        <el-table-column
            prop="overdueDays"
            label="逾期天数"
            width="120">
        </el-table-column>

        <el-table-column
            prop="contractNumber"
            label="合同号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="contractDate"
            label="合同签订日期"
            width="120">
        </el-table-column>
        <el-table-column
            prop="contractAddress"
            label="合同签订地点"
            width="120">
        </el-table-column>

        <el-table-column
            prop="client"
            label="客户"
            width="120">
        </el-table-column>

        <el-table-column
            prop="mname"
            label="材料"
            width="120">
        </el-table-column>


        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="3"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>



    <el-dialog title=" 原 料 下 单" :visible.sync="dialogFormVisible">
      <el-form :model="form">

        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="下单日期" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.orderDate"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="交货日期" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.deliveryDate"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="合同号" :label-width="formLabelWidth">
          <el-input v-model="form.contractNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="合同签订日期" :label-width="formLabelWidth">

          <el-date-picker
              v-model="form.contractDate"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="签订地点" :label-width="formLabelWidth">
          <el-input v-model="form.contractAddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="包装" :label-width="formLabelWidth">
          <el-input v-model="form.packages" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="税率" :label-width="formLabelWidth">
          <el-input v-model="form.taxRate" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单备注" :label-width="formLabelWidth">
          <el-input v-model="form.orderRemark" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="材料备注" :label-width="formLabelWidth">
          <el-input v-model="form.materialRemark" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="材料图片" :label-width="formLabelWidth">

          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/material/material/uploadimg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="客户" :label-width="formLabelWidth">
          <el-select v-model="form.clientId" placeholder="请选择客户">
            <el-option :label="c.client" :value="c.id"  v-for="c in client" :key="c.id"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="原材料" :label-width="formLabelWidth">
          <el-select v-model="form.materialId" placeholder="请选择原材料">
            <el-option :label="c.name" :value="c.id"  v-for="c in material" :key="c.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "MaterialView",
  data() {//属性
    return {
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      client:[],
      material:[],
      orders:[],
      total:0,
      pageNum:1,
      nowData:'DD'+this.gettime(),
      imageUrl:'',
      currentRow:null,

    }
  }, methods: {//自定义方法
    hand(val) {
      this.currentRow = val;
    },
    delOne()
    {
        this.axios.post("/material/material/delOne?id="+this.currentRow.id).then(res=>{
          if(res.data.code==200)
          {
            this.$message.success(res.data.msg);
            this.list();
          }else
          {
            this.$message.error(res.data.msg);
          }
        })
    },
    handleAvatarSuccess(res)
    {
      this.imageUrl="http://localhost:8180"+res.data;
      this.form.materialPic="http://localhost:8180"+res.data;
    },
    gettime()
    {
        var date = new Date();
        var s = moment(date).format("yyyyMMDDHHmmss");
        return s;
    },
    handleCurrentChange(pageNum)
    {
        this.pageNum=pageNum;
        this.list();
    },
    list()
    {
      this.axios.post("/material/material/list?pageNum="+this.pageNum).then(res=>{
        this.orders=res.data.data.list;
        this.total=res.data.data.total;
      })
    },
    getmaterial()
    {
      this.axios.post("/material/material/getmaterial").then(res=>{
        this.material=res.data.data;
      })
    },
    getclient()
    {
        this.axios.post("/material/material/getclient").then(res=>{
          this.client=res.data.data;
        })
    },
    add()
    {
        this.axios.post("/material/material/add",this.form).then(res=>{
          if(res.data.code==200)
          {
            this.dialogFormVisible=false;
            this.$message.success(res.data.msg);
            this.list();
          }else
          {
            this.$message.error(res.data.msg);
          }

        })
    },
    openAdd()
    {
        this.form={};
        this.imageUrl='';
        this.getclient();
        this.getmaterial();
        this.form.id=this.nowData;
        this.dialogFormVisible=true;
    }

  }, created() { //钩子函数
      this.list();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>